import React, { useState } from 'react'
import { View, Image } from '@tarojs/components'
import './IconSelection.scss'

// 导入所有 SVG 图标
import InterestAccrual from '../../resource/InterestAccrual.svg'
import School from '../../resource/School.svg'
import AddressBook from '../../resource/addressBook.svg'
import Bus from '../../resource/bus.svg'
import CateringIndustry from '../../resource/cateringIndustry.svg'
import Entertainment from '../../resource/entertainment.svg'
import Hydropower from '../../resource/hydropower.svg'
import Ingredients from '../../resource/ingredients.svg'
import Investment from '../../resource/investment.svg'
import Medicine from '../../resource/medicine.svg'
import MyBonus from '../../resource/myBonus.svg'
import Other from '../../resource/other.svg'
import PetClothing from '../../resource/petClothing.svg'
import Salary from '../../resource/salary.svg'

interface IconItem {
  name: string
  label: string
  icon: string
}

// 图标列表配置
const iconList: IconItem[] = [
  { name: 'salary', label: '工资', icon: Salary },
  { name: 'myBonus', label: '奖金', icon: MyBonus },
  { name: 'investment', label: '投资', icon: Investment },
  { name: 'interestAccrual', label: '利息', icon: InterestAccrual },
  { name: 'cateringIndustry', label: '餐饮', icon: CateringIndustry },
  { name: 'ingredients', label: '食材', icon: Ingredients },
  { name: 'entertainment', label: '娱乐', icon: Entertainment },
  { name: 'hydropower', label: '水电', icon: Hydropower },
  { name: 'bus', label: '交通', icon: Bus },
  { name: 'medicine', label: '医疗', icon: Medicine },
  { name: 'petClothing', label: '服饰', icon: PetClothing },
  { name: 'school', label: '教育', icon: School },
  { name: 'addressBook', label: '通讯', icon: AddressBook },
  { name: 'other', label: '其他', icon: Other },
]

interface IconSelectionProps {
  /** 当前选中的图标名称 */
  selectedIcon?: string
  /** 选择图标的回调 */
  onSelect?: (iconName: string,itemIcon:string) => void
}

const IconSelection: React.FC<IconSelectionProps> = ({ selectedIcon, onSelect }) => {
  const [activeIcon, setActiveIcon] = useState(selectedIcon || '')

  const handleIconClick = (iconName: string,itemIcon:string) => {
    setActiveIcon(iconName)
    onSelect?.(iconName,itemIcon)
  }

  return (
    <View className="icon-selection">
      
      <View className="icon-selection__grid">
        {iconList.map((item) => (
          <View
            key={item.name}
            className={`icon-selection__item ${
              activeIcon === item.name ? 'icon-selection__item--active' : ''
            }`}
            onClick={() => handleIconClick(item.label,item.icon)}
          >
            <Image
              src={item.icon}
              className="icon-selection__icon"
              mode="aspectFit"
            />
            <View className="icon-selection__label">{item.label}</View>
          </View>
        ))}
      </View>
    </View>
  )
}

export default IconSelection
